<template>
	<view class="index">
		<scroll-view scroll-x="true" class="scroll-contet" :scroll-into-view="scrollIntoIndex">
			<view 
			:id="'top'+index"
			class="scroll-item"
			v-for="(item,index) in topBar"
			:key="index"
			@tap="changeTab(index)">
				<text v-show="topBarIndex === index" class="scroll-name f-actiye-color">{{item.name}}</text>
				<text v-show="topBarIndex != index" class="scroll-name f-color">{{item.name}}</text>
			</view>
		</scroll-view>
	
		<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
			<swiper-item
			v-for="(item,index) in topBar"
			:key="index"
			>
				<view class="home-data">
					<IndexSwiper></IndexSwiper>
					<Recommend></Recommend>
					<Card cardTitle="猜你喜欢"></Card>
					<CommodityList></CommodityList>
				</view>
			</swiper-item>
		</swiper>
		
		<!--推荐-->
		<!-- <IndexSwiper></IndexSwiper>
		<Recommend></Recommend>
		<Card cardTitle="猜你喜欢"></Card>
		<CommodityList></CommodityList> -->
		
		<!--其他模板：运动户外、美妆...-->
		<!-- <Banner></Banner>
		<Icons></Icons>
		<Card cardTitle="热销爆品"></Card>
		<Hot></Hot>
		<Card cardTitle="店铺"></Card>
		<Shop></Shop>
		<Card cardTitle="为您推荐"></Card>
		<CommodityList></CommodityList> -->
		
	</view>
</template>

<script>
	import IndexSwiper from '@/components/index/indexSwiper.vue';
	import Recommend from '@/components/index/Recommend.vue';
	import Card from '@/components/common/Card.vue';
	import CommodityList from '@/components/common/CommodityList.vue';
	import Banner from '@/components/index/Banner.vue';
	import Icons from '@/components/index/Icons.vue';
	import Hot from '@/components/index/Hot.vue';
	import Shop from '@/components/index/Shop.vue';
	export default {
		data() {
			return {
				//选中的索引
				topBarIndex: 0,
				//顶栏跟随索引ID值
				scrollIntoIndex: "top0",
				//主体高度值
				clentHeight: 0,
				topBar: [
					{
						name: "推荐1"
					},
					{
						name: "运动户外"
					},
					{
						name: "服饰内衣"
					},
					{
						name: "美妆美容"
					},
					{
						name: "电子产品"
					},
					{
						name: "吃喝玩乐"
					},
					{
						name: "蔬菜商店"
					},
					{
						name: "二手闲置"
					}
				]
			}
		},
		components:{
			IndexSwiper,
			Recommend,
			Card,
			CommodityList,
			Banner,
			Icons,
			Hot,
			Shop
		},
		//标题栏按钮点击事件
		onNavigationBarButtonTap(e){
			if(e.float == "left"){
				uni.navigateTo({
					url: "../../pages/search/search"
				})
			}
		},
		onReady() {
			//获取节点属性
			let view = uni.createSelectorQuery().select(".home-data");
			view.boundingClientRect(data => {
				//获取高度值
				this.clentHeight = data.height;
			}).exec();
		},
		methods: {
			changeTab(index){
				if(this.topBarIndex === index){
					return;
				}
				this.topBarIndex = index;
				this.scrollIntoIndex = "top" + index;
			},
			onChangeTab(e){
				this.changeTab(e.detail.current);
			}
		}
	}
</script>

<style scoped>
.scroll-contet{
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
}
.scroll-item{
	display: inline-block;
	font-size: 32rpx;
	padding: 5rpx 10rpx;
}
.scroll-name{
	margin: 5rpx;
	padding: 5rpx 5rpx;
	font-size: 28rpx;
}
.f-actiye-color{
	border-bottom: 6rpx solid #49BDFB;
}
</style>
